<html>
    <head>
        <script language="javascript" type="text/javascript" src="pyco.common/pyco.common-dom.js"></script>
        <script language="javascript" type="text/javascript" src="pyco.xvalidation-core.js"></script>
        <script language="javascript" type="text/javascript" src="pyco.xvalidation-rules.js"></script>
        <script language="javascript" type="text/javascript" src="pyco.xvalidation-notifiers.js"></script>
        <style type="text/css">
            body {
                font-family: Arial, Tahoma, Verdana, Bitstream Vera Sans, sans-serif;
                font-size: .75em;
            }
            form span.ErrorMessage {
                color: red;
                margin-left: 1em;
            }
            form span.ErrorMessage span.Hint {
                font-style: italic;
            }
            form span.NotAvailable {
                display: none;
            }
            
        </style>
        <link rel="stylesheet" href="styles/notifiers.css" />
    </head>
    <body>
        <form name="form" id="form">
            <input type="text" name="name" id="name" />
            <input type="text" name="age" id="age" />
            <br />
            <input type="submit"/>
        </form>
        <script language="javascript" type="text/javascript">
            var rules = new RuleSet();


            var validAgeRule = new PatternMatchedRule({
                                            field: "age",
                                            message: "'Age' must be a number",
                                            hint: "Please specify the 'Age' field as a valid number. Example: 26",
                                            pattern: /^[0-9]+$/
                                            });

            rules.add(new RangedIntegerRule({
                                            field: "name",
                                            min: 18,
                                            minInclusive: true,
                                            max: 25,
                                            maxInclusive: false
                                        }));
                                        
            rules.add(validAgeRule);

            var form = document.getElementById("form");
            rules.install(form);

            var behavior = new ValidationBehavior();
            behavior.notifier = new InlineNotifier();
            
            /*
            
            behavior.addFormValidationListener({
                onValidationSucceeded: function (ev) {
                    if (prompt("Type 'YES'") != 'YES') ev.cancel();
                },
                onValidationFailed: function (ev) {
                    alert("Failed (" + ev.errorSet.errors.length + " errors)");
                    ev.stopPropagation();
                }                
            });
            
            */
            
            behavior.stopAtFirstError = false;
            
            behavior.apply(form);
        </script>
    </body>
</html>